<template>
  <el-container>
    <div class="row_block">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <span>{{title}}</span>
        </div>
        <el-form ref="form" :model="form" label-width="160px" :rules="rules" style="margin: 40px 60px 40px 20px">
          <el-form-item label="请选择套餐组类型" prop="dictSetMealGroupType">
            <el-select v-model="form.dictSetMealGroupType" :disabled="showSelectPackageType" placeholder="请选择套餐组类型"
                       style="width:330px" >
              <el-option
                v-for="t in types"
                :key="t.id"
                :label="t.name"
                :value="t.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="套餐组名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="提前多少天停机" prop="advanceNum" v-if='form.dictSetMealGroupType&&form.dictSetMealGroupType!="TONGYONG_HEAD"'>
            <el-input v-model="form.advanceNum"></el-input>
          </el-form-item>
          <el-form-item label="联通26号结账日" prop="ifUnicom">
            <el-radio-group v-model="form.ifUnicom" size="small">
              <el-radio label="C_NO" border>关闭</el-radio>
              <el-radio label="C_YES" border>开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="套餐描述" prop="explainText">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="form.explainText"
              style="width: 300px;"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit" v-preventReClick>确定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

  </el-container>

</template>

<script>
  import {singleCardStorage, packageSave, getSetMealHead} from '@/api/getData'

  export default {
    name: "packageCreate",
    data() {
      return {
        types: [
          {
            id: 'BASE_MONTH',
            name: '基础包+加油包（按月结算）'
          },
          {
            id: 'BASE_DAY',
            name: '基础包+加油包（按日结算）'
          },
          {
            id: 'SUPERPOSITION_MONTH',
            name: '叠加包（按月计算）'
          },
          {
            id: 'SUPERPOSITION_DAY',
            name: '叠加包（按日计算）'
          },
          {
            id: 'LIMIT_SPEED',
            name: '达量限速套餐(月)'
          },
          {
            id: 'LIMIT_SPEED_DAY',
            name: '达量限速套餐（天）'
          },
          {
            id: 'LIMIT_SPEED_DAY_PLUS',
            name: '高级达量限速套餐（天）'
          },
          {
            id: 'TONGYONG_HEAD',
            name: '通用套餐组'
          }
        ],
        channelcompanyListSelect: [],
        showSelectPackageType: false,
        form: {
          name: '',
          dictSetMealGroupType: '',
          channelCompanyId: '',
          dictIsUsed: 'YES',
          advanceNum: '0',
          ifUnicom: "C_NO",
          explainText: '',
        },
        rules: {
          name: [
            {required: true, message: '请输入组名', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          channelCompanyId: [
            {required: true, message: '请选择通道', trigger: 'blur'},
          ],
          dictSetMealGroupType: [
            {required: true, message: '请选择类型', trigger: 'blur'},
          ],
          advanceNum: [
            {
              validator: (rule, value, callback)=>{
                let val = parseInt(value);
                if (!val && value !== '' && val !== 0) {
                  callback('请输入提前多少天停机');
                }
                else if (val < rule.min || val > rule.max) {
                  callback(`输入范围是${rule.min}-${rule.max}`)
                } else {
                  callback()
                }
              }, min: 0, max: 7, trigger: 'change',required: true,
            }
          ],
        },
        pagekey: '',
        title: '',
      }
    },
    async created() {
      //获取上游公司接口
      this.form.id = this.$route.query.id;
      this.title = this.form.id ? '修改套餐组' : '新增套餐组';
      if (this.form.id) {
        //获取初始化值
        this.showSelectPackageType = true;
        this.dictSetMealGroupType = '';
        this.getOne(this.form.id);
      }
      this.pagekey = await
        this.$getPageKey();
    }
    ,

    methods: {

      async getOne(id) {
        let s = await
          getSetMealHead({id});
        if (s._result) {
          this.form.name = s.data.name;
          this.form.channelCompanyId = s.data.channelCompanyId;
          this.form.dictIsUsed = s.data.dictIsUsed;
          this.form.dictSetMealGroupType = s.data.dictSetMealGroupType;
          this.form.advanceNum = s.data.advanceNum;
          this.form.explainText = s.data.explainText;
          this.form.ifUnicom = s.data.ifUnicom;
          this.changeType()
        }
      },
      async onSubmit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let a = await packageSave(this.form, {obj: this, key: 'saveLoading', pagekey: this.pagekey});
            if (a._result) {
              this.$message.success("操作成功!")
              this.$router.push({path: '/road/roadList'})
            }
          } else {
            return false;
          }
        });
        this.pagekey = await
          this.$getPageKey();
      },
      cancel() {
        this.$router.push({path: '/road/roadList'})
      },

    }
  }
</script>

<style scoped>
  .row_block {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 70px 0;
  }
</style>
<style>
  .el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #606266;
    font-weight: bold;
  }
</style>
